<template>
  <el-card class="box-card">
    <div>菜单管理</div>
     <div id="customerChart" style="width: 600px;height:400px;"></div>
  </el-card>
</template>

<script  lang="ts">
import { inject,onMounted ,defineComponent, reactive, toRefs, ref, h } from "vue";

export default {
  name: "chart",
  // mounted(){
  //    var myChart = this.$echarts.init(document.getElementById('main'));

  //       // 指定图表的配置项和数据
  //       var option = {
  //           title: {
  //               text: 'ECharts 入门示例'
  //           },
  //           tooltip: {},
  //           legend: {
  //               data:['销量']
  //           },
  //           xAxis: {
  //               data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  //           },
  //           yAxis: {},
  //           series: [{
  //               name: '销量',
  //               type: 'bar',
  //               data: [5, 20, 36, 10, 10, 20]
  //           }]
  //       };

  //       // 使用刚指定的配置项和数据显示图表。
  //       myChart.setOption(option);
  // },
  setup() {
    let echarts = inject<any>('ec');//引入
    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("customerChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "总用户量" },
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
};
</script>

<style>
</style>